<template>
  <div class="header">
    <!-- 左侧 -->
    <div class="headerLeft">
      <div
        class="menu_btn chake_icon heat_btn"
        @click="emits('changeShowLeftMenu', true)"
      >
        <NuxtImg
          src="/images/home/head/sidebar-01.png"
          :class="{ open_menu: showLeftMenu }"
        />
      </div>
      <div class="logo heat_btn2 logo4" v-click-move>
        <NuxtImg
          alt="logo"
          src="/images/home/head/logo-01.png"
          class="heat_btn2"
        />
      </div>
    </div>
    <!-- 右侧 -->
    <div class="headerRight">
      <!-- 已登录 -->
      <div v-if="userStore.isLogin" class="LoggedIn">
        <div class="wallet">
          <div class="money">
            <div class="moneyDiv">
              <p>
                <span class="unit">{{ userStore.moneyUnit }}</span>
                <span class="text">{{ userMoney }}</span>
              </p>
            </div>
            <div class="deposit heat_btn" @click="toCarteira" v-click-move>
              <NuxtImg src="/images/layout/jia.png" />
            </div>
          </div>
        </div>
        <div
          class="Activity"
          v-click-move
          @click="emits('changeShowActivityDialog', true)"
        >
          <div class="el-badge item">
            <NuxtImg class="bonus" src="/images/layout/bonus.png" />
          </div>
        </div>
      </div>
      <!-- 未登录 -->
      <div v-else class="notLoggedIn">
        <div class="btn heat_btn" v-click-move @click="openLogin">
          {{ lang.entrar }}
        </div>
        <div class="btn heat_btn" v-click-move @click="openRegister">
          {{ lang.registrar }}
          <div class="icon">
            <NuxtImg src="/images/home/head/register_gift.png" />
            <span>{{ lang.bonus_title }}</span>
          </div>
        </div>
      </div>
      <div class="kf" @click="handleKfClick" v-click-move>
        <NuxtImg src="/images/home/head/sidebar-02.png" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
const lang: any = getCurrentPageLang("system");

defineProps(["showLeftMenu"]);
const emits = defineEmits(["changeShowLeftMenu", "changeShowActivityDialog"]);

const userStore = useUserStore();
const userMoney = ref("350");

function openLogin() {
  userStore.changeShowLogin(true, 1);
}
function openRegister() {
  userStore.changeShowLogin(true, 2);
}

function handleKfClick() {
  navigateTo({ name: "static-customer" });
}

function toCarteira() {
  userStore.changeShowCarteira(true);
}
</script>

<style scoped lang="scss">
.header {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 1.3rem;
  width: 100%;
  padding: 0.1rem 0.3rem 0;
  box-sizing: border-box;

  .headerLeft {
    display: flex;
    align-items: center;
    z-index: 1;
    margin-right: 0.15rem;

    .chake_icon {
      transition: all 0.2s ease-in-out;
    }

    .menu_btn {
      width: 0.8rem;
      height: 0.8rem;
      display: flex;
      align-items: center;
      justify-content: center;

      img {
        width: 100%;
        height: 100%;
        cursor: pointer;
        transition: all 0.2s;
      }
    }

    .logo {
      margin-left: 0.2rem;
      display: flex;
      align-items: center;

      img {
        max-height: 0.8rem;
      }
    }
  }

  .headerRight {
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
  }
}

// 通用按钮样式
.heat_btn {
  transition: all 0.3s ease-in-out;
}

.heat_btn2 {
  transition: all 0.2s ease-in-out;
}

.btn {
  cursor: pointer;
}

// 客服按钮
.kf {
  width: 0.8rem;
  height: 0.8rem;
  margin-left: 0.15rem;
  display: flex;
  align-items: center;
  justify-content: center;

  img {
    width: 100%;
    height: 100%;
  }
}

// 未登录状态
.notLoggedIn {
  display: flex;
  gap: 0.2rem;
  padding-right: 0.27rem;
  align-items: center;

  .btn {
    width: 2rem;
    height: 0.8rem;
    font-size: 0.34rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--theme-neutral1);
    border-radius: 0.2rem;
    position: relative;

    &:first-child {
      background-color: #ff69b4;
    }

    &:last-child {
      background-color: #ffd60c;
      color: #3b1d33;
    }
  }
}

// 图标动画
.icon {
  width: 1rem;
  height: 0.4rem;
  position: absolute;
  top: -0.16rem;
  right: -0.19rem;
  z-index: 5;
  animation: move-a5f7dbf4 3s linear infinite;
  img {
    width: 100%;
    height: 100%;
    vertical-align: middle;
  }
  span {
    position: absolute;
    top: 0;
    left: 0;
    font-size: 0.24rem;
    color: #fff;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

// 移动动画
.move {
  animation: move-a 0.5s ease-out;
}

.logoMove {
  animation: logo-move 0.5s ease-out;
}

// 已登录状态
.LoggedIn {
  display: flex;
  align-items: center;
  position: relative;

  .wallet {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--box-bg-color);
    border: 0.03rem solid var(--border-color);
    border-radius: 0.6rem;
    height: 0.8rem;
    box-sizing: border-box;
    padding: 0 0.15rem;

    .money {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .moneyDiv {
        display: flex;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
        color: var(--theme-neutral1);

        p {
          display: flex;
          align-items: center;
        }

        .unit {
          display: inline-block;
          font-weight: 700;
          display: flex;
          align-items: center;
          color: #ffd700;
          font-size: var(--font-title2);
          margin-right: 0.35rem;
          padding-top: 0.02rem;
          position: relative;

          &:before {
            content: "";
            width: 0.02rem;
            height: 0.36rem;
            background: var(--border-color);
            border-radius: 0.2rem;
            position: absolute;
            right: -0.15rem;
          }
        }
        .text {
          transform: translateY(1px);
        }
      }

      .deposit {
        width: 0.6rem;
        height: 0.6rem;
        display: flex;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
        font-weight: 100;
        font-size: 0.6rem;
        margin-left: 0.2rem;
        color: var(--theme-neutral4);

        img {
          width: 0.6rem;
          height: 0.6rem;
        }
      }
    }
  }

  .Activity {
    margin-left: 0.2rem;
    display: flex;
    align-items: center;

    .item {
      display: flex;
      align-items: center;

      .bonus {
        width: 0.9rem;
        height: auto;
        vertical-align: middle;
      }
    }
  }
}

// 菜单打开状态
.open_menu {
  transform: rotateZ(-180deg);
}

// 动画关键帧
@keyframes move-a5f7dbf4 {
  0% {
    transform: rotate(-10deg) scale(0.8);
  }
  25% {
    transform: rotate(10deg) scale(0.8);
  }
  50% {
    transform: rotate(0) scale(0.8);
  }
  70% {
    transform: rotate(0) scale3d(0.8, 0.9, 0.8);
  }
  90% {
    transform: rotate(0) scale3d(0.8, 0.9, 0.8);
  }
  100% {
    transform: rotate(-10deg) scale(0.8);
  }
}

@keyframes move-a {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(0.15rem);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes logo-move {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(0.15rem);
  }
  100% {
    transform: translateY(0);
  }
}
</style>
